<!-- 配置模块 -->
<template>
  <t-drawer
    v-model:visible="showSettingPanel"
    size="408px"
    :footer="false"
    header="页面配置"
    :close-btn="true"
    class="setting-drawer-container"
    @close-btn-click="handleCloseDrawer"
  >
    <div v-show="showSettingPanel" class="setting-warpper">
      <div class="title">
        <div>布局配置</div>
      </div>
      <div class="frame">
        <div
          class="side"
          :class="{ act: act.layout == 'side' && act.style == 'normal' }"
          @click="handleChargeDrawer({ layout: 'side', style: 'normal' })"
        >
          <div class="boxBorder">
            <div class="cont">
              <span></span>
              <span> 1-1 </span>
            </div>
          </div>
          <div>布局一</div>
        </div>
        <div
          class="easeSide"
          :class="{ act: act.layout == 'side' && act.style == 'noSecondMenu' }"
          @click="handleChargeDrawer({ layout: 'side', style: 'noSecondMenu' })"
        >
          <div class="boxBorder">
            <div class="cont">
              <span></span>
              <span> 1-2 </span>
            </div>
          </div>
          <div>布局一(简)</div>
        </div>
        <div
          class="top"
          :class="{ act: act.layout == 'top' && act.style == 'normal' }"
          @click="handleChargeDrawer({ layout: 'top', style: 'normal' })"
        >
          <div class="boxBorder">
            <div class="cont">
              <div class="hd"></div>
              <div class="ct">
                <span></span>
                <span> 2-1 </span>
              </div>
            </div>
          </div>
          <div>布局二(简)</div>
        </div>
        <div
          class="top"
          :class="{ act: act.layout == 'top' && act.style == 'topMany' }"
          @click="handleChargeDrawer({ layout: 'top', style: 'topMany' })"
        >
          <div class="boxBorder">
            <div class="cont">
              <div class="hd"></div>
              <div class="ct">
                <span></span>
                <span> 2-2 </span>
              </div>
            </div>
          </div>
          <div>布局二(复杂)</div>
        </div>
      </div>
      <div class="title">主题配置</div>
      <div class="theme">
        <span
          class="default"
          :class="{ act: theme == 'defaute' }"
          @click="handleChargeDrawer({ theme: 'defaute' })"
        ></span>
        <span
          class="mode1"
          :class="{ act: theme == 'mode1' }"
          @click="handleChargeDrawer({ theme: 'mode1' })"
        ></span>
        <span
          class="mode2"
          :class="{ act: theme == 'mode2' }"
          @click="handleChargeDrawer({ theme: 'mode2' })"
        ></span>
        <span
          class="mode3"
          :class="{ act: theme == 'mode3' }"
          @click="handleChargeDrawer({ theme: 'mode3' })"
        ></span>
        <span
          class="mode4"
          :class="{ act: theme == 'mode4' }"
          @click="handleChargeDrawer({ theme: 'mode4' })"
        ></span>
        <span
          class="mode5"
          :class="{ act: theme == 'mode5' }"
          @click="handleChargeDrawer({ theme: 'mode5' })"
        ></span>
      </div>
      <div class="title">
        <div>模式</div>
      </div>
      <div class="mode">
        <div
          v-for="(item, index) in MODE_OPTIONS"
          :key="index"
          class="side"
          :class="{ act: mod == item.type }"
          @click="handleChargeDrawer({ mode: item.type })"
        >
          <div class="boxBorder">
            <div class="cont">
              <span>
                <component :is="getModeIcon(item.type)" />
              </span>
            </div>
          </div>
          <p :style="{ textAlign: 'center', marginTop: '8px' }">
            {{ item.text }}
          </p>
        </div>
      </div>
      <div class="title">
        <div>接口测试工具</div>
      </div>
      <div class="request">
        <t-switch v-model="checked" @change="onChange" />
      </div>
    </div>
  </t-drawer>
</template>
<script setup lang="ts">
import { ref, reactive, computed, watchEffect } from 'vue'
import { useSettingStore, getSettingStore, usePermissionStore } from '@/store'
import STYLE_CONFIG from '@/config/style'
import SettingDarkIcon from '@/assets/assets-setting-dark.svg'
import SettingLightIcon from '@/assets/assets-setting-light.svg'

const settingStore = useSettingStore()
const getSetting = getSettingStore()
const permissionStore = usePermissionStore()
const checked = ref(settingStore.showApiModal)
const { layout } = getSetting

const initStyleConfig = () => {
  const styleConfig = STYLE_CONFIG
  for (const key in styleConfig) {
    if (Object.prototype.hasOwnProperty.call(styleConfig, key)) {
      styleConfig[key] = settingStore[key]
    }
  }

  return styleConfig
}

const formData = ref({ ...initStyleConfig() })

const onChange = () => {
  settingStore.updateConfig({
    showApiModal: !settingStore.showApiModal
  })
  checked.value = settingStore.showApiModal
}
const showSettingPanel = computed({
  get() {
    return settingStore.showSettingPanel
  },
  set(newVal: boolean) {
    settingStore.updateConfig({
      showSettingPanel: newVal
    })
  }
})

const act = reactive({
  layout: 'side',
  style: 'normal'
})

const theme = ref('defaute') // 全局颜色主题
const mod = ref('light') // 明暗主题
// 更改配置
const handleChargeDrawer = (item) => {
  settingStore.updateConfig(item)
  // 判断需要改变的配置
  // 切换明暗
  if (item.theme) {
    theme.value = item.theme
    changeBrandTheme(item.theme)
    // 切换颜色主题
  } else if (item.mode) {
    mod.value = item.mode
    // 切换框架2复杂版时，左侧默认加上菜单
  } else if (item.layout === 'top' && item.style === 'topMany') {
    permissionStore.initCurrentRoutes()
    // 切换布局
  } else {
    act.layout = item.layout
    act.style = item.style
  }
  // handleCloseDrawer()
}

// 关闭设置弹窗
const handleCloseDrawer = () => {
  settingStore.updateConfig({
    showSettingPanel: false
  })
}
// 更改色主题
const changeBrandTheme = (brandTheme: string) => {
  document.documentElement.setAttribute('theme-color', brandTheme)
}

// 明暗主题
const MODE_OPTIONS = [
  { type: 'light', text: '明亮' },
  { type: 'black', text: '暗黑' }
]
// 明暗主题
const getModeIcon = (mode: string) => {
  if (mode === 'light') {
    return SettingLightIcon
  }
  if (mode === 'black') {
    return SettingDarkIcon
  }
}
// 监听
watchEffect(() => {
  settingStore.updateConfig(formData.value)
})
</script>
<style lang="less" scoped>
.setting-warpper {
  // z-index: 9;

  .title {
    color: var(--color-black);
    display: flex;
    justify-content: space-between;

    .close {
      color: #ccc;
      cursor: pointer;
    }
  }

  span {
    line-height: 35px;
    padding: 2px 15px;
  }

  .frame,
  .request,
  .mode {
    display: flex;
    text-align: center;
    color: #000;
    line-height: 40px;
    margin-top: 10px;
    flex-wrap: wrap;

    span {
      padding: 0;
    }

    .side,
    .easeSide,
    .top {
      margin-right: 15px;
      cursor: pointer;

      .boxBorder {
        display: flex;
        width: 106px;
        height: 66px;
        border: solid 2px #dddddd;
        padding: 10px;

        .cont {
          display: flex;
          flex: 1;
          font-size: 20px;
          color: #bdc4d0;
          font-weight: bold;
          text-align: center;

          span:first-child {
            width: 16px;
            background-color: #000;
          }

          span:last-child {
            display: flex;
            justify-content: center;
            flex: 1;
            align-items: center;
            background-color: #d6dbe3;
          }
        }
      }
    }

    .top {
      .cont {
        display: flex;
        flex-direction: column;
        flex: 1;
        font-size: 20px;
        color: #bdc4d0;
        font-weight: bold;
        text-align: center;

        .hd {
          height: 6px;
          background-color: #000;
        }

        .ct {
          display: flex;

          span:first-child {
            width: 16px;
            background-color: #bdc4d0;
          }

          span:last-child {
            display: flex;
            justify-content: center;
            flex: 1;
            align-items: center;
            background-color: #d6dbe3;
          }
        }
      }
    }

    .act {
      .boxBorder {
        border-color: #0061fd;
      }
    }
  }

  .theme {
    padding-top: 20px;
    margin-bottom: 20px;
    margin-left: 10px;
    position: relative;

    span {
      display: inline-block;
      width: 24px;
      height: 24px;
      border-radius: 24px;
      padding: 0;
      margin-right: 20px;
      cursor: pointer;
      position: relative;
    }

    .act {
      &::after {
        content: '';
        position: absolute;
        top: -10px;
        left: -10px;
        display: inline-block;
        width: 40px;
        height: 40px;
        border-radius: 24px;
        border: solid 2px #0061fd;
      }
    }

    .default {
      background-color: #0061fd;
    }

    .mode1 {
      background-color: #04a871;
    }

    .mode2 {
      background-color: #ebb108;
    }

    .mode3 {
      background-color: #ee7b2f;
    }

    .mode4 {
      background-color: #e34d59;
    }

    .mode5 {
      background-color: #844fc2;
    }
  }
}
</style>
